<!DOCTYPE html>
<style>
    body { overflow: scroll; }
</style>
<p>There should be a hotpink square below.</p>
<div id="multicol" style="position:relative; columns:2; column-fill:auto; column-gap:0; width:100px; height:90px; line-height:20px; orphans:1; widows:1;">
    <br>
    <br>
    <br>
    <table data-expected-height="110" cellspacing="0" cellpadding="0">
        <col style="width:10px;">
        <col style="width:10px;">
        <tr data-expected-height="50">
            <td data-expected-height="50">
                <br><br>
            </td>
        </tr>
        <tr data-expected-height="60">
            <td data-expected-height="60">
                <br>
                <div data-offset-y="40" style="position:relative; background:hotpink;"><br></div>
                <br>
            </td>
            <td>
                <div data-offset-y="40" style="position:relative; height:20px; background:hotpink;"><br></div>
            </td>
        </tr>
    </table>
</div>
<script src="../resources/check-layout.js"></script>
<script>
    checkLayout("#multicol");
</script>
